<!--从右侧 滑入的分类菜单-->
<template>
  <!-- 筛选 -->
  <div class="poppup-box">
    <van-popup :position="position" :show="show" @close="close" :style="{height: '90%'}" overlay="true">
      <div class="filter-area">
        <div class="filter-input-box mar-t-15">
          <input type="text" placeholder="搜索商品名称" v-model="listQuery.title" @focus="listQuery.title=''">
          <van-search v-model="listQuery.title" placeholder="请输入搜索关键词" />
        </div>
        <div class="filter-menu-box pad-l-15 pad-r-15 pad-b-15">
          <div>
            <h5 class="mar-t-10">状态</h5>
            <ul>
              <li v-for="(item,index) in statusType" :key="index" @click="changeStatus(index)" :class="['mar-r-15', index === listQuery.showHomePage ? 'active-menu' : '']">{{item}}</li>
            </ul>
          </div>
          <div>
            <h5 class="mar-t-10">类型<span v-if="noSelectType">至少选择一个类型</span></h5>
            <ul>
              <li v-for="(item,index) in styleType" :key="index" :class="['mar-r-15', item.active ?'active-menu':'']" @click="selectStyle(item)">{{item.status}}</li>
            </ul>
          </div>
          <div style="position:relative">
            <h5 class="mar-t-10">分类<span v-if="noSelectSort">至少选择一个分类</span></h5>
            <ul>
              <li v-for="(item, index) in goodsSort" :key="index" :class="[item.active?'active-menu':'', (index+1)%3 == 0 ? '' : 'mar-r-15']" @click="selectSort(item)">
                {{item.categoryName}}
              </li>
            </ul>
          </div>
        </div>
        <div class="btn-group pad-b-10">
          <span class="resetBtn mar-l-15" @click="resetOperate">重置</span>
          <span class="sureBtn mar-l-10" :style="'background-color: '+background+';'" @click="sureOperate">确定</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { listOneGoodsCategory } from '@/api/distribution'
export default {
  props: {
    background: {
      type: String,
      default: '#ffe100'
    }
  },
  data() {
    return {
      show: false,
      position: 'right',
      noSelectSort: false,
      noSelectType: false,
      goodsSort: [], // 分类信息
      statusType: ['未推荐', '已推荐'], // 状态
      curStatusIndex: 0, // 当前选中状态索引
      styleType: [{ status: '自营商品', statusId: 10, active: true }, { status: '企业商品', statusId: 30, active: true }], // 类型
      listQuery: {
        title: '', // 通过输入商品名进行筛选
        showHomePage: 0, // 已推荐：1 未推荐：0
        categoryIds: [], // 选中的分类ID
        currentPage: 1, // 当前页数
        goodsTypes: [10, 30] // 选中的类型信息
      },
      count: 0, // 用于判断是否分类没选
      tempGoodsType: []
    }
  },
  mounted() {
    this.getSortInfo()
  },
  onShow() {
    this.noSelectType = false
    this.noSelectSort = false
    // 组件第一次没有onShow，所以用mounted初始化
    this.getSortInfo()
  },

  methods: {
    close() {
      this.show = false
      this.$emit('close', false)
    },
    showBox() {
      this.show = true
    },
    // 点击重置按钮
    resetOperate() {
      this.styleType[0].active = true
      this.styleType[1].active = true
      this.listQuery.title = ''
      this.listQuery.showHomePage = 0
      this.listQuery.categoryIds = ''
      this.listQuery.goodsTypes = '10,30'
      for (const item of this.goodsSort) {
        item.active = !('categoryId' in item)
      }
      this.$emit('sureOperate', this.listQuery)
      this.close()
    },
    // 点击确定按钮
    sureOperate() {
      this.count = 0
      this.listQuery.categoryIds = []
      for (const item of this.goodsSort) {
        if (item.active) {
          this.count++
          if ('categoryId' in item) {
            this.listQuery.categoryIds.push(item.categoryId)
          }
        }
      }
      if (this.listQuery.title === '') {
        if (this.count === 0) {
          this.noSelectSort = true
          return
        }
        if (this.listQuery.goodsTypes.length === 0) {
          this.noSelectType = true
          return
        }
        this.listQuery.categoryIds = this.listQuery.categoryIds.toString()
        this.listQuery.goodsTypes = this.listQuery.goodsTypes.toString()
      } else {
        this.listQuery.categoryIds = ''
        this.listQuery.goodsTypes = ''
      }
      this.count = 0
      this.close()
      this.$emit('sureOperate', this.listQuery)
      // this.resetOperate()
    },
    // 选择类型
    selectStyle(item) {
      item.active = !item.active
      this.noSelectType = false
      this.listQuery.goodsTypes = []
      for (let i = 0; i < this.styleType.length; i++) {
        if (this.styleType[i].active) {
          this.listQuery.goodsTypes.push(this.styleType[i].statusId)
          this.listQuery.goodsTypes = [...new Set(this.listQuery.goodsTypes)]
        }
      }
    },
    // 选择状态
    changeStatus(index) {
      this.listQuery.showHomePage = index
    },
    // 选择分类
    selectSort(item) {
      item.active = !item.active
      this.noSelectSort = false
      if ('tag' in item && item.active) {
        for (const val of this.goodsSort) {
          if (!('tag' in val)) {
            val.active = false
          }
        }
      } else {
        if (item.active) {
          for (const val of this.goodsSort) {
            if ('tag' in val) {
              val.active = false
            }
          }
        }
      }
    },
    // 获取分类信息
    getSortInfo() {
      listOneGoodsCategory({
        memberId: this.getCustomerId
      }).then(response => {
        this.goodsSort = response.data
        this.goodsSort.unshift({categoryName: '全部'})
        for (const item of this.goodsSort) {
          if (!('categoryId' in item)) {
            item.tag = 'all'
          }
          this.$set(item, 'active', !('categoryId' in item))
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="less">
.poppup-box {
  .van-popup {
    width: 80% !important;
    height: 100% !important;
  }
  .filter-area {
    width: 600rpx;
    height: 100%;
    background: #fff;
    position: relative;
    overflow: scroll;
    padding-bottom: 70px;
    box-sizing: border-box;
    .filter-input-box {
      input {
        width: 542rpx;
        background: #f5f5f5;
        border-radius: 32rpx;
        margin: 0 auto;
        height: 64rpx;
        text-align: center;
      }
    }
    .filter-menu-box {
      h5 {
        font-size: 30rpx;
        color: #343434;
        font-weight: 700;
        span {
          font-size: 24rpx;
          color: #f00;
          margin-left: 10rpx;
          font-weight: 600;
        }
      }
      ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        font-size: 24rpx;
        align-content: flex-start;
        li {
          width: 152rpx;
          height: 64rpx;
          background: #f5f5f5;
          border: 1px solid #ffe200;
          border-radius: 32rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border: none;
          margin-top: 20rpx;
          border: 1px solid #fff;
        }
        .active-menu {
          background: #fffbd8;
          border: 1px solid #ffe200;
          border-radius: 32px;
        }
      }
    }
    .btn-group {
      display: flex;
      justify-content: space-around;
      margin-top: 40rpx;
      position: fixed;
      bottom: 0;
      left: 0;
      box-sizing: border-box;
      width: 100%;
      background-color: #fff;
      padding: 10px 15px;
      span {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32rpx;
        color: #343434;
        font-weight: 700;
      }
      .resetBtn {
        width: 215rpx;
        height: 88rpx;
        background: #f5f5f5;
        border-radius: 44rpx;
      }
      .sureBtn {
        width: 307rpx;
        height: 88rpx;
        background: #ffe100;
        border-radius: 44rpx;
      }
    }
  }
}
</style>
